<template>
  <div class="searchArea">
    <div class="left">
      <slot name="left" />
    </div>
    <div class="right" :class="[isSpread ? '' : 'isSpread']">
      <slot name="right" />
      <div
        v-if="isShowSpread"
        type="text"
        class="spreadBtn"
        @click="$emit('change-spread')"
      >
        {{ isSpread ? '收起' : '展开' }}
        <span class="arrow" :class="[isSpread ? 'upArrow' : 'downArrow']" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchSection',
  props: {
    isSpread: {
      type: Boolean,
      default: null
    },
    isShowSpread: {
      type: Boolean,
      default: false
    }
  },
  data: function() {
    return {
      formInline: {
        value: 'test',
        user: 'test',
        region: ''
      },
      team: {
        id: 1
      }
    };
  },
  methods: {
    onSubmit() {
      console.log('submit');
    },
    resetForm(formName) {
      console.log(this.$refs[formName]);
      this.$refs[formName].resetFields();
    },
    addTeam() {
      console.log('新增班组');
    }
  }
};
</script>

<style scoped lang="scss">
.searchArea {
  display: flex;
  justify-content: space-between;

  .left {
    flex: 9;
    display: flex;
    flex-flow: row wrap;
    margin-right: 20px;

    /deep/.el-form {
      width: 100%;
      .el-form-item {
        display: flex;
        flex-flow: row nowrap;
        width: 30%;
        margin-right: 5%;
        float: left;
        margin-bottom: 14px;
        &:nth-child(3n) {
          margin-right: 0;
        }

        &:nth-child(n + 4) {
          margin-bottom: 0;
        }

        .el-form-item__label {
          text-align: left;
        }
        .el-form-item__content {
          flex: 1;
          /*超出部分隐藏*/
          text-overflow: ellipsis;
          /* 超出部分显示省略号 */
          white-space: nowrap;
          /*规定段落中的文本不进行换行 */
          width: 100%;
          & > * {
            width: 100%;
          }
        }
      }
    }
  }

  .right {
    flex: 1;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
    margin-right: 10px;

    &.isSpread {
      align-items: flex-start;
    }

    /deep/.el-form-item__content {
      display: flex;
      flex-flow: row nowrap;
    }
    //展开收起
    .spreadBtn {
      color: #2b7bfbff;
      width: 50px;
      height: 35px;
      white-space: nowrap;
      display: flex;
      align-items: center;
      cursor: pointer;
      font-size: 14px;
      margin-left: 10px;
    }

    //展开收起箭头
    .arrow {
      width: 0;
      height: 0;
      margin-left: 3px;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
    }

    .upArrow {
      border-bottom: 5px solid rgba(43, 123, 251, 1);
    }

    .downArrow {
      border-top: 5px solid rgba(43, 123, 251, 1);
    }

    //展开收起
  }
}
</style>
